<template>
  <div class="app-container">
    <header>
      <div>
        <el-form inline :model="form" class="demo-form-inline" size="small" label-width="140px">
          <el-form-item label="录入开始日期" label-width="100px">
            <el-date-picker v-model="form.user" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="录入截至日期">
            <el-date-picker v-model="form.user" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="ID">
            <el-input v-model="form.user" placeholder="审批人"></el-input>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="form.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="受理开始日期">
            <el-date-picker v-model="form.user" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="受理截止日期" label-width="100px">
            <el-date-picker v-model="form.user" value-format="yyyy-MM-dd" type="date">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="form.user" placeholder="审批人"></el-input>
          </el-form-item>

          <el-form-item label=" ">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="primary" icon="el-icon-plus">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </header>

    <div class="mt-1">
      <el-tabs type="card" @tab-click="handleClick">
        <el-tab-pane :label="v.name" :name="v.type" v-for="(v, i) in tabsArr" :key="i"></el-tab-pane>
      </el-tabs>
    </div>

    <main>
      <div>
        <el-table :data="tableData" height="590px" :max-height="590" border stripe
          :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column prop="id" label="ID" sortable width="180" align="center">
            <template slot-scope="scope">
              <span style="color: #4d4de2;cursor: pointer;"
                @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/DrTextSl.html')">{{
                  scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pno" label="人数" sortable width="180" align="center" />
          <el-table-column prop="vdate" label="日期" sortable align="center" />
          <el-table-column prop="TypeExt" label="类型" align="center" />
          <el-table-column prop="editer" label="修改人" align="center" />
          <el-table-column prop="edittime" label="修改日期" sortable align="center" />
          <el-table-column prop="firster" label="录入人" align="center" />
          <el-table-column prop="firsttime" label="录入日期" sortable align="center" />
          <el-table-column prop="ep" label="备注" align="center" />
          <el-table-column prop="address" label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" class="el-icon-delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>

    <!-- 分页 -->
    <div class="pagin">
      <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
        :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { ExamSystamAPI } from '@/api/adminstare'

/**
* @author        Yng
* @time          2023-11-13 17:04:11  星期一
* @description   考试管理下的受理
**/

export default {
  name: 'accep',
  data() {
    return {
      initParams: {
        action: 'slList',
        type: 0,
        page: 1,
        pageSize: 20,
      },
      form: {
        user: '',
        region: ''
      },
      tableData: [],
      total: 0,
      tabsArr: [],
      tabVal: '',
    }
  },
  mounted() {
    this.getTabData()
    this.getExam()
  },
  methods: {
    // 获取表单数据
    async getExam() {
      console.log('initParams', this.initParams);
      let { code, data, total } = await ExamSystamAPI(this.initParams)
      if (!code) {
        this.total = total
        this.tableData = data
      }
    },

    // 获取Tab数据
    async getTabData() {
      const result = await ExamSystamAPI({ action: 'slTypeList' })

      // 将数字类型转成字符串类型
      result.data.forEach(v => v.type = String(v.type))

      this.tabsArr = result.data

    },
    //  跳旧版详情
    go(val, URL) {
      // ?aid=101&id=207429&type=0&ver=1701742467525
      const redirectUrl = `${URL}?&aid=${this.$store.getters.userInfo.jxid}&id=${val.id}&type=0`
      const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
      this.$oldLoginSystem(redirectUrl, url)
    },
    // tab选项变化
    handleClick(tab) {
      this.initParams.type = tab.index
      this.getExam()
    },

    // 当前显示的条数 发生改变时触发
    handleSizeChange(pageSize) {
      this.initParams.pageSize = pageSize || 20
      this.getExam()
    },
    // 当前页码发生改变时触发
    handleCurrentChange(page) {
      this.initParams.page = page || 1
      this.getExam()
    },
  }
}
</script>

<style lang="scss" scoped></style>